<template>
  <el-dialog
    :show-close="false"
    :append-to-body="true"
    :before-close="dialogClose"
    :visible.sync="visible"
    class="small-common-dialog-size export-bill-dialog">
    <SectionTitle title="导出配置" style="margin-bottom: 24px;" />
    <div class="export-type">
      <span class="label-text">订单导出模式</span>
      <el-radio-group v-model="customerBillExportType">
        <el-radio :label="0">变更单</el-radio>
        <el-radio :label="1">最终单</el-radio>
      </el-radio-group>
    </div>
    <div class="export-type">
      <span class="label-text">订单导出数量</span>
      <el-checkbox v-if="!isDetail" v-model="isOnlyUnWriteOff">仅导出未完成核销订单</el-checkbox>
      <el-checkbox v-if="isDetail" v-model="isIncludeHistory">同时导出历史未完成核销订单</el-checkbox>
    </div>
    <div v-if="isDetail && isIncludeHistory" class="flex">
      <span class="label-text">历史账单范围</span>
      <el-date-picker
        v-model="historyTime"
        :picker-options="pickerOptions"
        type="monthrange"
        align="right"
        size="small"
        unlink-panels
        class="width240"
        format="yyyy/MM"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"/>
    </div>
    <div class="mt10 center">
      <el-button v-loading="loading" type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button class="btn ml20 cancel-btn-style" plain size="small" @click="dialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SectionTitle from '@/components/Title';
import { paramsRangeFormat } from '@/utils/paramsFormat';
export default {
  components: { SectionTitle },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    billMonth: {
      type: Number,
      default: null
    },
    customerBillIds: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      isOnlyUnWriteOff: false,
      isIncludeHistory: false,
      customerBillExportType: 0,
      historyTime: null,
      paramsObj: {},
      rangeKeyArr: [
        { attr: 'historyTime', start: 'historyTimeStart', end: 'historyTimeEnd', type: 'time' }
      ]
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate: (time) => {
          return time.getTime() >= this.billMonth;
        }
      };
    }
  },
  methods: {
    dialogClose() {
      this.$emit('close');
      this.type = 0;
      this.isOnlyUnWriteOff = false;
      this.isIncludeHistory = false;
      this.historyTime = null;
    },
    initParams(data) {
      this.paramsObj = data;
    },
    getParams() {
      const params = _.cloneDeep(this.paramsObj);
      params.customerBillExportType = this.customerBillExportType;
      if (this.isDetail) {
        params.isIncludeHistory = this.isIncludeHistory;
        params.historyTime = this.historyTime;
        paramsRangeFormat(this.rangeKeyArr, params);
      } else {
        params.isOnlyUnWriteOff = this.isOnlyUnWriteOff;
      }
      if (params.page) delete params.page;
      if (params.perPage) delete params.perPage;
      if (this.customerBillIds) params.customerBillIds = String(this.customerBillIds);
      return params;
    },
    handleSubmit() {
      const params = this.getParams();
      this.$emit('handleExport', params);
    }
  }
};
</script>
<style lang="scss" scoped>
.export-bill-dialog {
  padding: 16px 0;
  .export-type {
    margin-bottom: 24px;
    &::v-deep {
      .el-radio__label {
        font-size: 14px;
        line-height: 19px;
        padding-left: 4px;
      }
    }
  }
  .label-text {
    font-size: 14px;
    line-height: 19px;
    margin-right: 12px;
    display: inline-block;
    min-width: 86px;
    color: #999;
  }
  ::v-deep .el-checkbox__label {
    padding-left: 4px;
  }
  .flex {
    align-items: center;
    margin: 16px 0 8px;
    ::v-deep .el-date-editor {
      .el-range-separator {
        width: 10%;
      }
    }
  }
  .center{
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
}
</style>

